<template>
  <div class="messages">
    <div class="created-menus">
        <img src="../../assets/images/admin/create1.png" @click="$router.push('/admin/myCreated/meeting?type=1')" width="100" alt="">
        <img src="../../assets/images/admin/create2.png" @click="$router.push('/admin/myCreated/meeting?type=2')" width="100" alt="">
        <img src="../../assets/images/admin/create3.png" @click="$router.push('/admin/myCreated/meeting?type=3')" width="100" alt="">
        
    </div>
    <div class="clearfix mt20">
      <Tag color="primary">全部</Tag><Tag>会议</Tag><Tag>培训</Tag><Tag>直播</Tag>
      <span class="fr">
        <Tag color="warning">历史</Tag>
      </span>
    </div>
    <div class="mt10">
        <Table stripe  border :columns="columns1" :data="data1">
          <template slot-scope="{row,index}" slot="link">
            <a href="#" class="c1">http://www.qq.com</a>
          </template>

          <template slot-scope="{row,index}" slot="manager">
            <span>丽丽</span>
             <Icon type="ios-create c5" size="24" title="编辑"  @click.native="editHandle(row)"/>
          </template>

           <template slot-scope="{row,index}" slot="status">
            <span class="c7" v-if="index==1">进行中</span>
            <span class="c5" v-else>未开始</span>
          </template>


          <template slot-scope="{ row, index }" slot="action">
            <Icon type="ios-paper c1" size="22" title="详情" @click="detailHandle(row)"/>
            <Icon type="ios-copy c4"  size="24" title="复制"/>
            <Icon type="ios-share c6"  size="24" title="分享"/>
            <Icon type="ios-create c5" size="24" title="编辑" />
            <Icon type="ios-trash c7" size="24" title="删除" @click="deleteConfirm(index)"/>
          </template>
        </Table>
    
    </div>
      
     <div class="page mt20">
       <Page :total="100" show-sizer show-total/>
     </div> 

     <Modal v-model="modalEdit" footer-hide title="编辑主持人" width="460px" scrollable>
       <div class="text-center c4">最多选择2个主持人</div>
       <ul class="persons">
         <li v-for="(item, i) in persons" :key="i" :class="{active: item.active}" @click="clickHandle(item)">
           {{item.name}}
           <Icon type="md-checkmark-circle c4" v-show="item.active"/>
         </li>
       </ul>
      <div class="text-center mt20">
        <Button type="primary" style="width:180px;">确认</Button>
      </div>
     </Modal>
      
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalEdit: false,
        value1: '0',
        single: [],
        position:[{
          title: '我的会议'
        }],
        columns1: [
          {title: '会议ID', key: 'id'},
          {title: '会议名称', key: 'address'},
          { title: '类型', key: 'address'},
          { title: '链接地址', slot: 'link', width:180},
          { title: '创建人', key: 'address'},
          { title: '主持人', slot: 'manager'},
          { title: '创建时间', key: 'address'},
          { title: '开始时间', key: 'address'},
          { title: '状态', slot: 'status'},
          { title: '操作', slot: 'action', width: 200, align: 'center'},
         ],
         inputValue: '',
         data1:[
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           
         ],
         persons: [
           {name: '李大伟1', active: true},
           {name: '李大伟2', active: false},
           {name: '李大伟3', active: false},
           {name: '李大伟4', active: false},
           {name: '李大伟5', active: false},
           {name: '李大伟6', active: false},
           {name: '李大伟7', active: false},
           {name: '李大伟8', active: false},
         ]
      }
    },
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    methods:{
      deleteConfirm (index) {
        let that = this
        this.$Modal.confirm({
          title: '警告',
          content: '真要删除此记录吗?',
          onOk () {
            that.data1.splice(index, 1)
            that.$Message.success('删除成功')
          }
        })
      },
      editHandle(row) {
        this.modalEdit = true
      },
      detailHandle(row) {
        this.$router.push(`/admin/myCreated/meetingDetail?id=${row.id}`)
      },
      clickHandle (item) {
        let count = 0
        this.persons.forEach(v => {
          if (v.active) {
            count ++
          }
        })
        

        if (count > 2) {
          this.$Message.error('最多选择2个主持人')
        } else if (count === 2){
          item.active = false
        } else {
          item.active = !item.active
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.created-menus {
  img {
    margin-right: 20px;
    cursor: pointer;
    transition: transform 0.3s;

    &:hover{
      transform: scale(1.08);
    }
  }
}
.persons{
  margin:20px auto;
  width: 300px;
  li{
    width:80px;
    float: left;
    height: 80px;
    background: #f4f4f4;
    border-radius: 50%;
    margin-right: 20px;
    margin-bottom: 20px;
    line-height: 80px;
    border:1px solid #ddd;
    text-align: center;
    position: relative;
    cursor: pointer;
    &.active{
      border:1px solid #fd9827;
    }
    .ivu-icon-md-checkmark-circle{
      position: absolute;
      bottom: -6px;
      left: 30px;
      font-size: 20px;
    }
  }
}
</style>
